<template>
  <div class="item">
    <div class="wrapper">
      <div class="title">
        <h2>{{item.case_title}}</h2>
      </div>
      <div class="content">
        <p v-if="item.case_content.length <= 56">
          {{item.case_content}}
        </p>
        <p v-else>
          {{item.case_content.substring(0,56)}}...
        </p>
      </div>
      <div class="detail"><el-link :underline="false" @click="visible = true">查看</el-link></div>
    </div>
    <el-dialog :title="item.case_title" :visible.sync="visible" append-to-body>
      <p>{{item.case_content}}</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "CaseShowItem",
    props:{
      item:Object
    },
    data(){
      return{
        visible : false
      }
    },
    methods:{
      showAll(){
        // this.$alert(this.item.case_content, this.item.case_title, {
        //   confirmButtonText: '关闭',
        //   callback: action => {
        //     this.$message({
        //       type: 'info',
        //       message: `action: ${ action }`
        //     });
        //   }
        // });

      }
    }
  }
</script>

<style scoped>
  .wrapper{
    height: 240px;
    border: 1px solid #c3c6c9;
    box-shadow: 0 0 5px #c4c5c7;
    margin: 0 20px;
    /*padding: 20px;*/
    border-radius: 5px;
  }
  .title{
    /*width: 200px;*/
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: left;
    color: #fff;
    background: url("../../../assets/images/成功案例.png");
    /*background-color: #a8c8e7;*/
    /*background-color: #666666;*/
  }
  h2{
    margin: 0;
    padding: 0 10px;
  }
  .content{
    width: 250px;
    height: 90px;
    margin: 20px;
    text-align: left;
    font-size: 16px;
    color: #666;
    /*overflow:hidden;*/
    /*text-overflow:ellipsis;*/
    /*!*white-space:nowrap*!*/
    /*display: -webkit-box;*/
    /*-webkit-line-clamp : 4;*/
    /*-webkit-box-orient: vertical;*/
    /*letter-spacing: 1px;*/
    /*background-color: #2c3e50;*/
  }
  .detail{
    width: 280px;
    text-align: right;
    margin-right: 20px;
    /*background-color: #8cc5ff;*/
  }
  .el-link{
    color: #0e6bcb !important;
  }
</style>